<template>
  <div class="home-container">
    <!-- 顶部导航栏 -->
    <el-header class="header">
      <div class="header-left">
        <el-icon class="logo" icon="home-filled"></el-icon>
        <span class="title">婚礼管理系统</span>
      </div>
      <div class="header-right">
        <el-dropdown trigger="hover">
          <span class="user-info">
            <el-icon icon="user"></el-icon>
            {{ username }}
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="goToProfile">个人中心</el-dropdown-item>
              <el-dropdown-item @click="goToSettings">系统设置</el-dropdown-item>
              <el-dropdown-item divided @click="handleLogout"><el-icon icon="logout"></el-icon> 退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </el-header>

    <div class="main-content">
      <!-- 侧边菜单 -->
      <el-aside class="aside" width="200px">
        <el-menu
          default-active="1"
          class="el-menu-vertical-demo"
          @select="handleMenuSelect"
        >
          <el-menu-item index="1">
            <el-icon><House /></el-icon>
            <span>首页</span>
          </el-menu-item>
          <el-menu-item index="2">
            <el-icon icon="document"></el-icon>
            <span>字典管理</span>
          </el-menu-item>
          <el-menu-item index="3">
            <el-icon><User /></el-icon>
            <span>用户管理</span>
          </el-menu-item>
          <el-menu-item index="4">
            <el-icon icon="calendar"></el-icon>
            <span>婚礼管理</span>
          </el-menu-item>
          <el-menu-item index="5">
            <el-icon icon="setting"></el-icon>
            <span>系统设置</span>
          </el-menu-item>
          <el-menu-item index="6">
            <el-icon icon="info-filled"></el-icon>
            <span>关于我们</span>
          </el-menu-item>
        </el-menu>
      </el-aside>

      <!-- 主内容区域 -->
      <el-main class="main">
        <div class="welcome-message">
          <h2>欢迎使用婚礼管理系统</h2>
          <p>这是一个用于管理婚礼相关事务的系统，祝您使用愉快！</p>
        </div>

        <div class="statistics-cards">
          <el-card class="stat-card">
            <div class="stat-content">
              <div class="stat-number">128</div>
              <div class="stat-label">婚礼订单</div>
            </div>
            <div class="stat-icon"><Calendar /></div>
          </el-card>
          <el-card class="stat-card">
            <div class="stat-content">
              <div class="stat-number">256</div>
              <div class="stat-label">客户数量</div>
            </div>
            <div class="stat-icon"><User /></div>
          </el-card>
          <el-card class="stat-card">
            <div class="stat-content">
              <div class="stat-number">98%</div>
              <div class="stat-label">满意度</div>
            </div>
            <div class="stat-icon"><el-icon icon="smile"></el-icon></div>
          </el-card>
          <el-card class="stat-card">
            <div class="stat-content">
              <div class="stat-number">32</div>
              <div class="stat-label">今日预约</div>
            </div>
            <div class="stat-icon"><el-icon icon="clock"></el-icon></div>
          </el-card>
        </div>
      </el-main>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import { ElIcon } from 'element-plus';
import request from '../utils/request';

const router = useRouter();
const username = ref('');

// 获取用户信息
const getUserInfo = async () => {
  try {
    const response = await request.get('/user/info');
    if (response.success) {
      username.value = response.data.username || '管理员';
    } else {
      ElMessage.error(response.message || '获取用户信息失败');
    }
  } catch (error) {
    ElMessage.error('获取用户信息失败，请重试');
  }
};

// 退出登录
const handleLogout = () => {
  // 清除localStorage中的token
  localStorage.removeItem('token');
  ElMessage.success('退出登录成功');
  router.push('/login');
};

// 菜单选择事件
const handleMenuSelect = (index) => {
  // 根据选择的菜单索引进行相应的路由跳转
  switch (index) {
    case '1':
      router.push('/');
      break;
    case '2':
      router.push('/dictionary');
      break;
    case '3':
      router.push('/user');
      break;
    case '4':
      router.push('/wedding');
      break;
    case '5':
      router.push('/settings');
      break;
    case '6':
      router.push('/about');
      break;
    default:
      router.push('/');
  }
};

// 跳转到个人中心
const goToProfile = () => {
  router.push('/profile');
};

// 跳转到系统设置
const goToSettings = () => {
  router.push('/settings');
};

// 页面加载时获取用户信息
onMounted(() => {
  getUserInfo();
});
</script>

<style scoped>
.home-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  background-color: #409eff;
  color: white;
  height: 60px;
}

.header-left {
  display: flex;
  align-items: center;
}

.logo {
  font-size: 24px;
  margin-right: 10px;
}

.title {
  font-size: 18px;
  font-weight: bold;
}

.header-right {
  display: flex;
  align-items: center;
}

.user-info {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 5px 10px;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.user-info:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.main-content {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.aside {
  background-color: #545c64;
  color: white;
}

.el-menu-vertical-demo {
  background-color: #545c64;
  border-right: none;
}

.el-menu-item {
  color: rgba(255, 255, 255, 0.7);
}

.el-menu-item.is-active {
  color: #409eff;
  background-color: rgba(0, 0, 0, 0.2);
}

.main {
  padding: 20px;
  background-color: #f5f7fa;
  overflow-y: auto;
}

.welcome-message {
  margin-bottom: 20px;
  padding: 20px;
  background-color: white;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
}

.statistics-cards {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.stat-card {
  flex: 1;
  min-width: 200px;
  display: flex;
  align-items: center;
  padding: 15px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
}

.stat-content {
  flex: 1;
}

.stat-number {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
}

.stat-label {
  color: #606266;
  margin-top: 5px;
}

.stat-icon {
  font-size: 36px;
  color: #409eff;
  margin-left: 10px;
}
</style>